<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" />

<head>
<title>Home</title>
</head>

<body>
    <p>聊天室</p>
    <form id="wiselyForm">
        <textarea rows="4" cols="60" name="text"></textarea>
        <input type="submit" />
    </form>
    <div id="output"></div>
</body>
<script src="/webjars/jquery/3.0.0/jquery.min.js"></script>
     <script src="/webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.0/stomp.min.js"></script>
<script th:inline="javascript">
    $('#wiselyForm').submit(function(e) {
        e.preventDefault();
        var text = $('#wiselyForm').find('textarea[name="text"]').val();
        stomp.send("/chat", {}, text);
        $('#output').append("<b>&emsp;&emsp;&emsp;" + text + "</b><br/>");
    });

    var sock = new SockJS('gs');
    var stomp = Stomp.over(sock);
    stomp.connect('user', 'user', function() {
        stomp.subscribe("/user/queue/notifications", function(response) {
            $('#output').append("<b>" + response.body + "</b><br/>");
        });
    });
</script>
</html>
